// RewriteResult.js
import copyicon from '@/assets/image/copyicon.png';
import zancaiicon from '@/assets/image/zancaiicon.png';
import { feedbacksComment } from '@/services/ant-design-pro/conversation';
import { replaceN } from '@/utils/index';
import { DislikeFilled, LikeFilled } from '@ant-design/icons';
import { Button, Dropdown, message, Tooltip } from 'antd';
import ClipboardJS from 'clipboard';
import { nanoid } from 'nanoid';
import { useEffect, useState } from 'react';
import { connect } from 'umi';
import Typewriter from './Typewriter';
const RewriteResult = (props: any) => {
  const [list, setList] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const {
    data = [],
    scrollToBottom = () => {},
    updateState = ({}) => {},
    setAILogs = ({}) => {},
  } = props;
  useEffect(() => {
    if (data.length > 0) {
      setList([data[0]]);
    }
  }, [data]);

  const addNextCommand = () => {
    const nextIndex = currentIndex + 1;

    if (nextIndex < data.length) {
      setList((prevList: any) => [...prevList, data[nextIndex]]);
      setCurrentIndex(nextIndex);
    } else {
      //索引+1 用于结束最后一个的打字机
      setCurrentIndex(nextIndex);
    }
    scrollToBottom();
  };
  //拷贝文字
  const copyText = (textToCopy: any) => {
    console.log(textToCopy);

    const clipboard = new ClipboardJS('.copy-button', {
      text: () => textToCopy,
    });

    clipboard.on('success', () => {
      message.open({
        type: 'info',
        content: '拷贝成功',
      });
      clipboard.destroy();
    });

    clipboard.on('error', () => {
      message.open({
        type: 'error',
        content: '拷贝失败',
      });
      clipboard.destroy();
    });
  };

  const MarkersSelect = [
    {
      label: (
        <div className="zancaiHandleTag">
          <LikeFilled style={{ color: '#60D9A4' }} />赞
        </div>
      ),
      key: '1',
    },
    {
      label: (
        <div className="zancaiHandleTag">
          <DislikeFilled style={{ color: '#F57070' }} />踩
        </div>
      ),
      key: '2',
    },
  ];
  const zancaiHandleClick = async (v: any, item: any) => {
    updateState({
      robotLoading: true,
    });
    let type = Number(v.key);
    let zanTxt = '这个内容写得很好，值得表扬';
    let caiTxt = '这个内容有待提高，需要改进';
    let reason = type === 1 ? zanTxt : caiTxt;
    let body = {
      document_uuid: props?.highClassWrite?.documentUUID,
      feedback_type: type,
      reason,
      version_no: props?.highClassWrite?.selVersionNo,
      target_content: item,
      start: null,
      end: null,
      position: null,
    };
    const res = await feedbacksComment(body);
    if (res.code === 0) {
      let zancaiTip = {
        key: nanoid(),
        type: 'userZanCai',
        data: {
          type,
          reason,
          target_content: item,
          range: null,
        },
      };
      setTimeout(() => {
        setAILogs((prev) => [...prev, zancaiTip]);
        updateState({
          robotLoading: false,
        });
      }, 500);
    } else {
      updateState({
        robotLoading: false,
      });
      message.open({
        type: 'error',
        content: res.msg,
      });
    }
  };
  return (
    <>
      {list.length > 0 &&
        list.map((item, index) => (
          <div className="commandList copyBox" key={index}>
            {index === currentIndex ? (
              <Typewriter className="commandList-bd" text={item} onComplete={addNextCommand} />
            ) : (
              <div
                className="commandList-bd"
                dangerouslySetInnerHTML={{ __html: replaceN(item) }}
              ></div>
            )}
            <div className="commandList-ft">
              <Tooltip
                defaultOpen={false}
                trigger={['hover']}
                color="blue"
                title="拷贝文案"
                placement="topLeft"
              >
                <Button
                  className="copy-button"
                  onClick={() => {
                    copyText(item);
                  }}
                  shape="circle"
                >
                  <img className="avatar" src={copyicon} height={32} width={32} />
                </Button>
              </Tooltip>
              <Dropdown
                placement="bottom"
                menu={{ items: MarkersSelect, onClick: (v) => zancaiHandleClick(v, item) }}
                className=""
              >
                <img className="avatar" src={zancaiicon} height={32} width={32} />
              </Dropdown>
            </div>
          </div>
        ))}
    </>
  );
};

// export default RewriteResult;
export default connect(({ highClassWrite }) => ({ highClassWrite }))(RewriteResult);
